<template>
  <!--
          作者：luoyiming
          时间：2019-10-25
          描述：商户-商户管理
      -->
  <div class="user">
   
    <div class="common-seach-wrap fr">
      <el-form
        size="small"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
      <el-form-item label="区域">
        <el-select  v-model="formInline.province_id" placeholder="省" @change="initCity" clearable>
          <el-option :label="item.name" :value="item.id" v-for="(item,index) in areaList" :key='index'></el-option>
        </el-select>
        <el-select  v-if="formInline.province_id!=''" v-model="formInline.city_id" placeholder="市" @change="initRegion" clearable>
          <el-option :label="item1.name" :value="item1.id" v-for="(item1,index1) in areaList[formInline.province_id]['city']"
                     :key='index1'></el-option>
        </el-select>
        <el-select  v-if="formInline.city_id!=''" v-model="formInline.region_id" placeholder="区" clearable>
          <el-option :label="item2.name" :value="item2.id"
                     v-for="(item2,index2) in areaList[formInline.province_id]['city'][formInline.city_id]['region']"
                     :key='index2'></el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="formInline.search"
            placeholder="请输入商户名称"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="success" @click="onExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--内容-->
    <div class="product-content">
      <div class="table-wrap">
        <el-table
          size="small"
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
        >
          
          <el-table-column
            prop="shop_supplier_id"
            label="商户ID"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="region_name"
            label="所属地区"
          ></el-table-column>
          <el-table-column prop="name" label="商户名称"></el-table-column>
          <el-table-column
            prop="link_name"
            label="联系人"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="link_phone"
            label="联系电话"
            width="120"
          ></el-table-column>

          <el-table-column
            prop="total_price"
            label="营业额(元)"
      
          ></el-table-column>

          <el-table-column
            prop="fee"
            label="支付费率(0.6%;元)"
      
          ></el-table-column>
          
          <el-table-column
            prop="total_commission"
            label="分佣总额（元）"
      
          ></el-table-column>

          <el-table-column
            prop="income_money"
            label="累计收入(元)"
      
          ></el-table-column>

          

          <el-table-column
            prop="withdrawal_money"
            label="可提现(元;T+3)"
      
          ></el-table-column>

          <el-table-column  label="提现（待确认）">
          <template slot-scope="scope">
          <span v-if="scope.row.be_confirmed_money > 0" style="color: red;">{{ scope.row.be_confirmed_money }}</span>
          <span v-if="scope.row.be_confirmed_money <= 0" style="color: blue;">{{ scope.row.be_confirmed_money }}</span>
        </template>

        </el-table-column>
          <!-- <el-table-column prop="address" label="联系地址"></el-table-column> -->
          <!-- <el-table-column
            prop="create_time"
            label="添加时间"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="create_time"
            label="审核"
            width="80"
            align="center"
          >
            <template slot-scope="scope">
              <p
                v-if="scope.row.is_audit == 0"
                @click="auditHandle(scope.row)"
                style="color:#C0C4CC;cursor: pointer;text-decoration: underline"
              >
                待审核
              </p>
              <span v-else-if="scope.row.is_audit == 1" style="color:green"
                >通过</span
              >
              <p
                v-else-if="scope.row.is_audit == 2"
                style="color:red;cursor: pointer;"
                @click="auditHandle(scope.row)"
              >
                不通过
              </p>
            </template>
          </el-table-column> -->
        

          <!-- <el-table-column prop="total_order_num" label="佣金明细" align="center">
            <template slot-scope="scope"><span
              style="cursor: pointer;color: #00a0e9" @click="commissionClick(scope.row)">查看</span></template>
          </el-table-column> -->

          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              
              <el-button
                @click="commissionClick(scope.row)"
                type="text"
                size="small"
              >
                明细
              </el-button>

              <el-button  v-if="scope.row.be_confirmed_money > 0 && scope.row.status == 0"
                @click="withdrawalClick(scope.row.be_confirmed_money,scope.row.shop_supplier_id)"
                type="text"
                size="small"
              >
                打款
              </el-button>

              <el-button  v-if="scope.row.be_confirmed_money > 0 && scope.row.status == 0 "
                @click="refuseClick(scope.row.be_confirmed_money,scope.row.shop_supplier_id)"
                type="text"
                size="small"
              >
                拒绝
              </el-button>


            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--分页-->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="curPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalDataNumber"
        >
        </el-pagination>
      </div>
    </div>

   

    <Commission :open_commission.sync="open_commission" :user_id="0" :referee_id="0" :shop_supplier_id="shop_supplier_id" :nickName="supplier_name"></Commission>


    <el-dialog
        title="确认打款"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"  append-to-body style="z-index: 3000;">
        <p>提现金额<el-input size="small" v-model="withdrawalForm.be_confirmed_money" placeholder="请输入提现金额" disabled></el-input></p>

        
        <div style="margin-top: 20px ;">
          <p>打款凭证</p>
          <div class="leval-item upload-btn">
          
          <img :src="path" class="mt10" width="120px;" v-if="path" style="margin:10px;" />

          <el-upload class="avatar-uploader" multiple ref="upload" action="string" :accept="accept"
            :before-upload="onBeforeUploadImage" :http-request="UploadImage" :show-file-list="false" :on-change="fileChange">
            <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
          </el-upload>
          </div>
         
        </div>
      
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="confirmWithdrawal">确 定</el-button>
        </span>
        </el-dialog>


        <el-dialog
        title="拒绝打款"
        :visible.sync="dialogVisible2"
        width="50%"
        :before-close="handleClose"  append-to-body style="z-index: 3000;">
        <p>拒绝原因<el-input size="small" v-model="withdrawalForm.remarks" placeholder="请输入原因"></el-input></p>

      
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="confirmRefuse">确 定</el-button>
        </span>
        </el-dialog>

  </div>
</template>

<script>
import FileApi from '@/api/file.js';
import SupplierApi from "@/api/supplier.js";
import DataApi from '@/api/data.js';
import Commission from "./dialog/Commission.vue";
import qs from 'qs';
export default {
  components: { 
    Commission
  },
  data() {
    return {
      dialogVisible2:false,
      path: '',
      image_id: '',

      dialogVisible:false,
      be_confirmed_money:0,
      /*是否加载完成*/
      loading: true,
      /*列表数据*/
      tableData: [],
      /*门店列表数据*/
      storeList: [],
      /*一页多少条*/
      pageSize: 20,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      /*横向表单数据模型*/
      formInline: {
        shop_id: "",
        search: "",
        province_id: '',
        city_id: '',
        region_id: '',
        remarks:'',
      },
      /*是否打开添加弹窗*/
      open_add: false,
      /*是否打开编辑弹窗*/
      open_edit: false,
      /*当前编辑的对象*/
      userModel: {},
      logoImgs: [],
      businessImgs: [],
      auditOpen: false,
      auditRow: {},
      supplier_name: '',
      open_orders: false,
      open_order_referee_id: 0,
      open_commission:false,
      shop_supplier_id:0,
      /*省市区*/
      areaList: [],
      withdrawalForm:{
        be_confirmed_money:0,
        shop_supplier_id:0,
        payment_images:'',
      },
      accept:'',
      this_config: {
        /*上传个数*/
        total: 1,
        file_type: 'image'
      },
    };
  },
  created() {
    /*获取列表*/
    this.getTableList();
    this.getRegion()
  },
  methods: {

    /*选择上传图片*/
    fileChange(e) {
        console.log(e);
      },

      /*选择图片之前*/
      onBeforeUploadImage(file) {
         return true;
      },

      /*上传图片*/
      UploadImage(param) {
        let self = this;
        const loading = this.$loading({
          lock: true,
          text: '图片上传中,请等待',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        const formData = new FormData();
        formData.append('iFile', param.file);
        formData.append("group_id", self.activeType);
        formData.append("file_type", self.this_config.file_type);
        formData.append("update_type", 'certificate');
        FileApi.uploadFile(formData)
          .then(response => {
            loading.close();
            this.path = response.data.file_url;
           this.withdrawalForm.payment_images = this.path;
          
          })
          .catch(response => {
            loading.close();
            self.$message({
              message: '本次上传图片失败',
              type: 'warning'
            });
            param.onError();
          });
      },


    confirmWithdrawal() {
      let Params = this.withdrawalForm;

      SupplierApi.confirmWithdrawal(Params, true)
      .then(res => {
      this.$message({
                message: '操作成功',
                type: 'success'
              });

        this.withdrawalForm.be_confirmed_money = '';
        this.dialogVisible = false;
        this.getTableList();
      })
      .catch(error => {
      });

    },

    confirmRefuse() {
      let Params = this.withdrawalForm;

      SupplierApi.confirmRefuse(Params, true)
      .then(res => {
      this.$message({
                message: '操作成功',
                type: 'success'
              });

        this.withdrawalForm.be_confirmed_money = '';
        this.dialogVisible2 = false;
        this.getTableList();
      })
      .catch(error => {
      });

    },

    handleClose(done) {
      this.dialogVisible = false;
    },

    handleClose2(done) {
      this.dialogVisible2 = false;
    },

    withdrawalClick(be_confirmed_money,shop_supplier_id){
      this.withdrawalForm.be_confirmed_money = be_confirmed_money;
      this.withdrawalForm.shop_supplier_id = shop_supplier_id;
      this.dialogVisible = true;
    },

    refuseClick(be_confirmed_money,shop_supplier_id){
      this.withdrawalForm.be_confirmed_money = be_confirmed_money;
      this.withdrawalForm.shop_supplier_id = shop_supplier_id;
      this.dialogVisible2 = true;
    },

    onExport: function () {
      let baseUrl =
        process.env.NODE_ENV === "development"
          ? window.location.protocol + "//" + window.location.host
          : process.env.VUE_APP_API_URL;
      window.location.href = baseUrl + '/index.php/shop/statistics.supplier/exportCommission?' + qs.stringify(this.formInline);
    },
    getRegion(){
        let self = this;
        DataApi.getRegion({}, true)
          .then(res => {
            self.areaList = res.data.regionData;
          })
          .catch(error => {

          });
      },

    /*初始化城市id*/
    initCity() {
      this.formInline.city_id = ''
    },
    /*初始化区id*/
    initRegion() {
      this.formInline.region_id = ''
    },

    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.loading = true;
      self.getTableList();
    },

    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getTableList();
    },

    /*获取列表*/
    getTableList() {
      let self = this;
      let Params = this.formInline;
      Params.page = self.curPage;
      Params.list_rows = self.pageSize;
      Params.list_rows = self.pageSize;
      SupplierApi.getSupplierCommissionListData(Params, true)
        .then(res => {
          self.loading = false;
          self.tableData = res.data.list.data;
          self.totalDataNumber = res.data.list.total;
          self.tableData.forEach(function(item) {
            if (item.business) {
              self.businessImgs.push(item.business.file_path);
            }
            if (item.logo) {
              self.logoImgs.push(item.logo.file_path);
            }
          });
        })
        .catch(error => {
          self.loading = false;
        });
    },
  
    /*搜索查询*/
    onSubmit() {
      this.curPage = 1;
      this.getTableList();
    },



    ordersClick(item) {
      this.open_order_referee_id = item.shop_supplier_id;
      this.supplier_name = item.name;
      this.open_orders = true;
    },

    commissionClick(item) {
      this.shop_supplier_id = item.shop_supplier_id;
      this.supplier_name = item.name;
      this.open_commission = true;
    },

  }
};
</script>

<style></style>
